<template>
  <div class="home-content">
    <el-row class="home-main">
     <el-col class="content-left" :xs="24" :sm="24" :md="12" :lg="10" :xl="10">
      <!-- <el-col class="content-left" :xs="24" :sm="24" :md="16" :lg="10" :xl="10"> -->
        <!-- 但是没必要 之前是 打开了调试工具 所以 左边样式不对了，不打开的话 是正常的 -->
        <!-- 就用作者之前调好的 参数吧 -->
<!--        这里 :md="16"  左边的变得宽了一点 -->
        <main-display-items :mainDisItems="mainDisItems"></main-display-items>
        <el-col class="left-top" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-col class="home-industry-regulation" :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
            <industry-regulation></industry-regulation>
          </el-col>
          <!-- 2021年8月26日10:37:55  修改 大小 -->

          <!-- <el-col class="home-accessPlatform-regulation" :xs="2" :sm="4" :md="6" :lg="6" :xl="8"> -->
            <!-- 这个不好  xl 会到下面 -->

                    <el-col class="home-accessPlatform-regulation" :xs="2" :sm="4" :md="6" :lg="6" :xl="6">
               <!-- 确实根据频幕适配 改变大小了，频幕大了会跳到下面去 假如写 10 的话 -->
               <!-- 适配可以不管 一般也没有这种事情 -->
                <!-- <el-col class="home-accessPlatform-regulation" :xs="2" :sm="4" :md="6" :lg="8" :xl="10"> -->
            <access-platform-regulation></access-platform-regulation>
          </el-col>
        </el-col>
        <el-col class="left-bottom" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <vehicle-distribution-dashboard></vehicle-distribution-dashboard>
        </el-col>
      </el-col>
      <el-col class="content-right" :xs="24" :sm="24" :md="12" :lg="14" :xl="14">
        <home-security-right></home-security-right>
      </el-col>
    </el-row>
    <footer-container></footer-container>
  </div>
</template>

<style src="./bodycontent-container.css" type="text/css">

</style>

<script>
  import MainDisplayItems from '@/components/MainDisplayItems/MainDisplayItems';
  import IndustryRegulation from '@/components/IndustryRegulation/IndustryRegulation';
  import AccessPlatformRegulation from '@/components/AccessPlatformRegulation/AccessPlatformRegulation';
  import VehicleDistributionDashboard from '@/components/VehicleDistributionDashboard/VehicleDistributionDashboard';
  import HomeSecurityRight from '@/components/HomeSecurityRight/HomeSecurityRight';
  import FooterContainer from '@/Home/container/FooterContainer/FooterContainer';
  export default {
    name: 'BodyContent-Container',
    components: {
      MainDisplayItems,
      IndustryRegulation,
      AccessPlatformRegulation,
      VehicleDistributionDashboard,
      HomeSecurityRight,
      FooterContainer
    },
    data() {
      return {
        mainDisItems: [{
          href: "/Home/CheckManage/ZoneCheckRank",
          spanClass: 'ban6',
          spanText: '考核通报 >>'
        }, {
          href: "/Home/DataShared",
          spanClass: 'share',
          spanText: '数据共享 >>'
        }, {
          href: "/Home/Report/VehicleInstall",
          spanClass: 'report',
          spanText: '统计分析 >>'
        }, {
          href: "/Home/CompanySupervise",
          spanClass: 'companySupervise',
          spanText: '企业监管 >>'
        }]
      }
    },
    created: function(){
      const breadNavs = [];
      this.$emit('viewIn', breadNavs);
    }
  }
</script>
